<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>AetherTech - 云端智能，驱动未来</title>
        <script src="https://cdn.tailwindcss.com"></script>
        <script src="https://unpkg.com/lucide@latest"></script>
        <style>
            @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");

            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            body {
                font-family:
                    "Inter",
                    -apple-system,
                    BlinkMacSystemFont,
                    sans-serif;
                background: linear-gradient(
                    135deg,
                    #f0f9ff 0%,
                    #e0f2fe 50%,
                    #f0f9ff 100%
                );
                color: #0f172a;
                overflow-x: hidden;
            }

            /* 渐变背景动画 */
            .gradient-bg {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(
                    -45deg,
                    #e0f2fe,
                    #f0f9ff,
                    #dbeafe,
                    #eff6ff
                );
                background-size: 400% 400%;
                animation: gradientShift 15s ease infinite;
                z-index: -1;
            }

            @keyframes gradientShift {
                0% {
                    background-position: 0% 50%;
                }
                50% {
                    background-position: 100% 50%;
                }
                100% {
                    background-position: 0% 50%;
                }
            }

            /* 浮动气泡效果 */
            .bubble {
                position: absolute;
                border-radius: 50%;
                background: linear-gradient(
                    135deg,
                    rgba(147, 197, 253, 0.3),
                    rgba(59, 130, 246, 0.1)
                );
                animation: float-up 20s infinite;
            }

            @keyframes float-up {
                0% {
                    transform: translateY(100vh) scale(0);
                    opacity: 0;
                }
                10% {
                    opacity: 0.4;
                }
                90% {
                    opacity: 0.4;
                }
                100% {
                    transform: translateY(-100vh) scale(1.5);
                    opacity: 0;
                }
            }

            /* 玻璃态卡片 */
            .glass-card {
                background: rgba(255, 255, 255, 0.7);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
                border: 1px solid rgba(255, 255, 255, 0.5);
                box-shadow: 0 8px 32px rgba(59, 130, 246, 0.1);
            }

            /* 渐变文字 */
            .gradient-text {
                background: linear-gradient(135deg, #3b82f6, #06b6d4);
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
            }

            /* 悬浮效果 */
            .hover-lift {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .hover-lift:hover {
                transform: translateY(-8px);
                box-shadow: 0 20px 40px rgba(59, 130, 246, 0.15);
            }

            /* 光晕效果 */
            .glow {
                position: relative;
            }

            .glow::before {
                content: "";
                position: absolute;
                top: -2px;
                left: -2px;
                right: -2px;
                bottom: -2px;
                background: linear-gradient(45deg, #3b82f6, #06b6d4, #3b82f6);
                border-radius: inherit;
                opacity: 0;
                transition: opacity 0.3s;
                z-index: -1;
                filter: blur(10px);
            }

            .glow:hover::before {
                opacity: 0.5;
            }

            /* 波浪动画 */
            .wave {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 100px;
                background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='0.3' d='M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,138.7C960,139,1056,117,1152,106.7C1248,96,1344,96,1392,96L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
                background-size: cover;
                animation: wave 10s linear infinite;
            }

            @keyframes wave {
                0% {
                    transform: translateX(0);
                }
                100% {
                    transform: translateX(-50%);
                }
            }

            /* 脉冲圆环 */
            .pulse-ring {
                position: relative;
            }

            .pulse-ring::before {
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 100%;
                height: 100%;
                border: 2px solid #3b82f6;
                border-radius: 50%;
                animation: pulse-ring-animation 2s cubic-bezier(0.4, 0, 0.6, 1)
                    infinite;
            }

            @keyframes pulse-ring-animation {
                0% {
                    transform: translate(-50%, -50%) scale(1);
                    opacity: 1;
                }
                100% {
                    transform: translate(-50%, -50%) scale(1.5);
                    opacity: 0;
                }
            }

            /* 渐变按钮 */
            .gradient-btn {
                background: linear-gradient(135deg, #3b82f6, #06b6d4);
                position: relative;
                overflow: hidden;
            }

            .gradient-btn::before {
                content: "";
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(
                    90deg,
                    transparent,
                    rgba(255, 255, 255, 0.3),
                    transparent
                );
                transition: left 0.5s;
            }

            .gradient-btn:hover::before {
                left: 100%;
            }

            /* 数字滚动效果 */
            .counter {
                display: inline-block;
            }

            /* 导航栏动画 */
            .nav-item {
                position: relative;
            }

            .nav-item::after {
                content: "";
                position: absolute;
                bottom: -2px;
                left: 50%;
                width: 0;
                height: 2px;
                background: linear-gradient(90deg, #3b82f6, #06b6d4);
                transition: all 0.3s;
                transform: translateX(-50%);
            }

            .nav-item:hover::after {
                width: 100%;
            }

            /* 特性卡片动画 */
            .feature-card {
                opacity: 0;
                transform: translateY(30px);
                animation: fadeInUp 0.6s forwards;
            }

            @keyframes fadeInUp {
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            /* 技术栈图标动画 */
            .tech-icon {
                animation: bounce 2s infinite;
            }

            @keyframes bounce {
                0%,
                100% {
                    transform: translateY(0);
                }
                50% {
                    transform: translateY(-10px);
                }
            }

            /* 滚动指示器 */
            .scroll-indicator {
                animation: scroll-bounce 2s infinite;
            }

            @keyframes scroll-bounce {
                0%,
                100% {
                    transform: translateY(0);
                }
                50% {
                    transform: translateY(10px);
                }
            }
        </style>
    </head>
    <body>
        <!-- 动态背景 -->
        <div class="gradient-bg"></div>
        <div id="bubbles-container"></div>

        <!-- 导航栏 -->
        <nav class="fixed top-0 w-full z-50 glass-card px-6 py-4">
            <div class="max-w-7xl mx-auto flex justify-between items-center">
                <div class="flex items-center space-x-3">
                    <div
                        class="w-10 h-10 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-xl flex items-center justify-center"
                    >
                        <i data-lucide="cloud" class="w-6 h-6 text-white"></i>
                    </div>
                    <span class="text-2xl font-bold gradient-text"
                        >AetherTech</span
                    >
                </div>
                <div class="hidden md:flex items-center space-x-8">
                    <a
                        href="#home"
                        class="nav-item text-gray-700 hover:text-blue-600 transition-colors"
                        >首页</a
                    >
                    <a
                        href="#solutions"
                        class="nav-item text-gray-700 hover:text-blue-600 transition-colors"
                        >解决方案</a
                    >
                    <a
                        href="#products"
                        class="nav-item text-gray-700 hover:text-blue-600 transition-colors"
                        >产品</a
                    >
                    <a
                        href="#about"
                        class="nav-item text-gray-700 hover:text-blue-600 transition-colors"
                        >关于我们</a
                    >
                    <button
                        class="gradient-btn text-white px-6 py-2 rounded-full font-medium hover:shadow-lg transition-all"
                    >
                        免费试用
                    </button>
                </div>
                <button class="md:hidden" onclick="toggleMobileMenu()">
                    <i data-lucide="menu" class="w-6 h-6"></i>
                </button>
            </div>
        </nav>

        <!-- 主页英雄区 -->
        <section
            id="home"
            class="relative min-h-screen flex items-center justify-center pt-20"
        >
            <div class="max-w-7xl mx-auto px-6 text-center">
                <div class="mb-8">
                    <span
                        class="inline-block px-4 py-2 bg-blue-100 text-blue-600 rounded-full text-sm font-medium"
                    >
                        🚀 全新AI云平台正式发布
                    </span>
                </div>
                <h1 class="text-5xl md:text-7xl font-bold mb-6">
                    <span class="gradient-text">云端智能</span>
                    <br />
                    <span class="text-gray-800">驱动未来创新</span>
                </h1>
                <p class="text-xl text-gray-600 mb-10 max-w-3xl mx-auto">
                    AetherTech
                    提供企业级云计算和人工智能解决方案，助力您的业务实现数字化转型，释放无限潜能
                </p>
                <div
                    class="flex flex-col sm:flex-row gap-4 justify-center mb-16"
                >
                    <button
                        class="gradient-btn text-white px-8 py-4 rounded-full text-lg font-medium hover:shadow-xl transition-all"
                    >
                        开始免费试用
                    </button>
                    <button
                        class="glass-card px-8 py-4 rounded-full text-lg font-medium hover:bg-white/80 transition-all"
                    >
                        <span class="flex items-center justify-center gap-2">
                            <i data-lucide="play-circle" class="w-5 h-5"></i>
                            观看演示
                        </span>
                    </button>
                </div>

                <!-- 滚动指示器 -->
                <div
                    class="scroll-indicator absolute bottom-10 left-1/2 transform -translate-x-1/2"
                >
                    <i
                        data-lucide="chevron-down"
                        class="w-6 h-6 text-gray-400"
                    ></i>
                </div>
            </div>

            <!-- 装饰元素 -->
            <div
                class="absolute top-40 left-10 w-20 h-20 bg-blue-200 rounded-full opacity-50 animate-pulse"
            ></div>
            <div
                class="absolute bottom-40 right-10 w-32 h-32 bg-cyan-200 rounded-full opacity-30 animate-pulse"
                style="animation-delay: 1s"
            ></div>
        </section>

        <!-- 解决方案 -->
        <section id="solutions" class="relative py-20">
            <div class="max-w-7xl mx-auto px-6">
                <div class="text-center mb-16">
                    <h2 class="text-4xl md:text-5xl font-bold mb-4">
                        <span class="gradient-text">全方位解决方案</span>
                    </h2>
                    <p class="text-xl text-gray-600">
                        为不同行业量身定制的数字化转型方案
                    </p>
                </div>

                <div class="grid md:grid-cols-3 gap-8">
                    <div
                        class="feature-card glass-card p-8 rounded-2xl hover-lift"
                        style="animation-delay: 0.1s"
                    >
                        <div
                            class="w-16 h-16 bg-gradient-to-br from-blue-400 to-blue-600 rounded-2xl flex items-center justify-center mb-6 tech-icon"
                        >
                            <i
                                data-lucide="brain"
                                class="w-8 h-8 text-white"
                            ></i>
                        </div>
                        <h3 class="text-2xl font-bold mb-4">人工智能</h3>
                        <p class="text-gray-600 mb-6">
                            深度学习、计算机视觉、自然语言处理等AI技术，赋能业务智能化升级
                        </p>
                        <ul class="space-y-2 text-gray-600">
                            <li class="flex items-center gap-2">
                                <i
                                    data-lucide="check"
                                    class="w-4 h-4 text-green-500"
                                ></i>
                                <span>智能客服系统</span>
                            </li>
                            <li class="flex items-center gap-2">
                                <i
                                    data-lucide="check"
                                    class="w-4 h-4 text-green-500"
                                ></i>
                                <span>预测分析平台</span>
                            </li>
                            <li class="flex items-center gap-2">
                                <i
                                    data-lucide="check"
                                    class="w-4 h-4 text-green-500"
                                ></i>
                                <span>自动化工作流</span>
                            </li>
                        </ul>
                    </div>

                    <div
                        class="feature-card glass-card p-8 rounded-2xl hover-lift"
                        style="animation-delay: 0.2s"
                    >
                        <div
                            class="w-16 h-16 bg-gradient-to-br from-cyan-400 to-cyan-600 rounded-2xl flex items-center justify-center mb-6 tech-icon"
                            style="animation-delay: 0.5s"
                        >
                            <i
                                data-lucide="database"
                                class="w-8 h-8 text-white"
                            ></i>
                        </div>
                        <h3 class="text-2xl font-bold mb-4">云计算</h3>
                        <p class="text-gray-600 mb-6">
                            弹性可扩展的云基础设施，保障业务高可用性和数据安全
                        </p>
                        <ul class="space-y-2 text-gray-600">
                            <li class="flex items-center gap-2">
                                <i
                                    data-lucide="check"
                                    class="w-4 h-4 text-green-500"
                                ></i>
                                <span>容器化部署</span>
                            </li>
                            <li class="flex items-center gap-2">
                                <i
                                    data-lucide="check"
                                    class="w-4 h-4 text-green-500"
                                ></i>
                                <span>自动扩缩容</span>
                            </li>
                            <li class="flex items-center gap-2">
                                <i
                                    data-lucide="check"
                                    class="w-4 h-4 text-green-500"
                                ></i>
                                <span>混合云架构</span>
                            </li>
                        </ul>
                    </div>

                    <div
                        class="feature-card glass-card p-8 rounded-2xl hover-lift"
                        style="animation-delay: 0.3s"
                    >
                        <div
                            class="w-16 h-16 bg-gradient-to-br from-indigo-400 to-indigo-600 rounded-2xl flex items-center justify-center mb-6 tech-icon"
                            style="animation-delay: 1s"
                        >
                            <i
                                data-lucide="shield-check"
                                class="w-8 h-8 text-white"
                            ></i>
                        </div>
                        <h3 class="text-2xl font-bold mb-4">安全防护</h3>
                        <p class="text-gray-600 mb-6">
                            企业级安全解决方案，全方位保护您的数字资产和隐私数据
                        </p>
                        <ul class="space-y-2 text-gray-600">
                            <li class="flex items-center gap-2">
                                <i
                                    data-lucide="check"
                                    class="w-4 h-4 text-green-500"
                                ></i>
                                <span>零信任架构</span>
                            </li>
                            <li class="flex items-center gap-2">
                                <i
                                    data-lucide="check"
                                    class="w-4 h-4 text-green-500"
                                ></i>
                                <span>威胁检测系统</span>
                            </li>
                            <li class="flex items-center gap-2">
                                <i
                                    data-lucide="check"
                                    class="w-4 h-4 text-green-500"
                                ></i>
                                <span>合规性管理</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <!-- 产品展示 -->
        <section id="products" class="relative py-20">
            <div class="wave"></div>
            <div class="max-w-7xl mx-auto px-6 relative z-10">
                <div class="glass-card rounded-3xl p-12">
                    <div class="grid md:grid-cols-2 gap-12 items-center">
                        <div>
                            <h2 class="text-4xl font-bold mb-6">
                                <span class="gradient-text">AetherCloud</span>
                            </h2>
                            <p class="text-xl text-gray-600 mb-8">
                                新一代企业级云平台，集成AI、大数据、物联网等前沿技术，为您的业务提供强大的技术支撑
                            </p>

                            <div class="grid grid-cols-2 gap-6 mb-8">
                                <div
                                    class="text-center p-4 bg-blue-50 rounded-xl"
                                >
                                    <div
                                        class="text-3xl font-bold gradient-text counter"
                                        data-target="99.99"
                                    >
                                        0
                                    </div>
                                    <p class="text-gray-600">服务可用性 %</p>
                                </div>
                                <div
                                    class="text-center p-4 bg-cyan-50 rounded-xl"
                                >
                                    <div
                                        class="text-3xl font-bold gradient-text counter"
                                        data-target="50"
                                    >
                                        0
                                    </div>
                                    <p class="text-gray-600">毫秒响应时间</p>
                                </div>
                                <div
                                    class="text-center p-4 bg-indigo-50 rounded-xl"
                                >
                                    <div
                                        class="text-3xl font-bold gradient-text counter"
                                        data-target="1000"
                                    >
                                        0
                                    </div>
                                    <p class="text-gray-600">企业客户</p>
                                </div>
                                <div
                                    class="text-center p-4 bg-blue-50 rounded-xl"
                                >
                                    <div
                                        class="text-3xl font-bold gradient-text counter"
                                        data-target="24"
                                    >
                                        0
                                    </div>
                                    <p class="text-gray-600">全球节点</p>
                                </div>
                            </div>

                            <button
                                class="gradient-btn text-white px-6 py-3 rounded-full font-medium hover:shadow-lg transition-all"
                            >
                                了解更多详情
                            </button>
                        </div>

                        <div class="relative">
                            <div class="glass-card p-8 rounded-2xl">
                                <div
                                    class="aspect-video bg-gradient-to-br from-blue-100 to-cyan-100 rounded-xl flex items-center justify-center"
                                >
                                    <div class="text-center">
                                        <div
                                            class="w-32 h-32 mx-auto mb-4 relative pulse-ring"
                                        >
                                            <div
                                                class="w-full h-full bg-gradient-to-br from-blue-500 to-cyan-500 rounded-full flex items-center justify-center"
                                            >
                                                <i
                                                    data-lucide="cloud"
                                                    class="w-16 h-16 text-white"
                                                ></i>
                                            </div>
                                        </div>
                                        <p class="text-gray-600">
                                            智能云平台架构
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <!-- 装饰圆环 -->
                            <div
                                class="absolute -top-4 -right-4 w-24 h-24 border-4 border-blue-200 rounded-full opacity-50"
                            ></div>
                            <div
                                class="absolute -bottom-4 -left-4 w-32 h-32 border-4 border-cyan-200 rounded-full opacity-30"
                            ></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 技术栈 -->
        <section class="relative py-20">
            <div class="max-w-7xl mx-auto px-6">
                <div class="text-center mb-16">
                    <h2 class="text-4xl font-bold mb-4">
                        <span class="gradient-text">技术栈</span>
                    </h2>
                    <p class="text-xl text-gray-600">采用业界领先的技术架构</p>
                </div>

                <div
                    class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8"
                >
                    <div
                        class="glass-card p-6 rounded-xl text-center hover-lift"
                    >
                        <div
                            class="w-16 h-16 mx-auto mb-3 bg-gradient-to-br from-orange-400 to-red-500 rounded-lg flex items-center justify-center"
                        >
                            <i
                                data-lucide="code-2"
                                class="w-8 h-8 text-white"
                            ></i>
                        </div>
                        <p class="font-medium">React</p>
                    </div>
                    <div
                        class="glass-card p-6 rounded-xl text-center hover-lift"
                    >
                        <div
                            class="w-16 h-16 mx-auto mb-3 bg-gradient-to-br from-green-400 to-emerald-500 rounded-lg flex items-center justify-center"
                        >
                            <i
                                data-lucide="server"
                                class="w-8 h-8 text-white"
                            ></i>
                        </div>
                        <p class="font-medium">Node.js</p>
                    </div>
                    <div
                        class="glass-card p-6 rounded-xl text-center hover-lift"
                    >
                        <div
                            class="w-16 h-16 mx-auto mb-3 bg-gradient-to-br from-blue-400 to-blue-600 rounded-lg flex items-center justify-center"
                        >
                            <i
                                data-lucide="database"
                                class="w-8 h-8 text-white"
                            ></i>
                        </div>
                        <p class="font-medium">PostgreSQL</p>
                    </div>
                    <div
                        class="glass-card p-6 rounded-xl text-center hover-lift"
                    >
                        <div
                            class="w-16 h-16 mx-auto mb-3 bg-gradient-to-br from-purple-400 to-pink-500 rounded-lg flex items-center justify-center"
                        >
                            <i
                                data-lucide="git-branch"
                                class="w-8 h-8 text-white"
                            ></i>
                        </div>
                        <p class="font-medium">Kubernetes</p>
                    </div>
                    <div
                        class="glass-card p-6 rounded-xl text-center hover-lift"
                    >
                        <div
                            class="w-16 h-16 mx-auto mb-3 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-lg flex items-center justify-center"
                        >
                            <i
                                data-lucide="brain"
                                class="w-8 h-8 text-white"
                            ></i>
                        </div>
                        <p class="font-medium">TensorFlow</p>
                    </div>
                    <div
                        class="glass-card p-6 rounded-xl text-center hover-lift"
                    >
                        <div
                            class="w-16 h-16 mx-auto mb-3 bg-gradient-to-br from-indigo-400 to-purple-500 rounded-lg flex items-center justify-center"
                        >
                            <i
                                data-lucide="shield"
                                class="w-8 h-8 text-white"
                            ></i>
                        </div>
                        <p class="font-medium">Docker</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- CTA区域 -->
        <section class="relative py-20">
            <div class="max-w-4xl mx-auto px-6">
                <div class="glass-card rounded-3xl p-12 text-center">
                    <h2 class="text-4xl font-bold mb-6">
                        <span class="gradient-text"
                            >准备好开启数字化转型之旅了吗？</span
                        >
                    </h2>
                    <p class="text-xl text-gray-600 mb-8">
                        加入超过1000家企业的选择，让我们一起创造更美好的未来
                    </p>
                    <div class="flex flex-col sm:flex-row gap-4 justify-center">
                        <button
                            class="gradient-btn text-white px-8 py-4 rounded-full text-lg font-medium hover:shadow-xl transition-all"
                        >
                            立即开始免费试用
                        </button>
                        <button
                            class="glass-card px-8 py-4 rounded-full text-lg font-medium hover:bg-white/80 transition-all"
                        >
                            联系销售团队
                        </button>
                    </div>
                </div>
            </div>
        </section>

        <!-- 页脚 -->
        <footer class="relative py-12 border-t border-blue-200">
            <div class="max-w-7xl mx-auto px-6">
                <div class="grid md:grid-cols-4 gap-8 mb-8">
                    <div>
                        <div class="flex items-center space-x-3 mb-4">
                            <div
                                class="w-10 h-10 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-xl flex items-center justify-center"
                            >
                                <i
                                    data-lucide="cloud"
                                    class="w-6 h-6 text-white"
                                ></i>
                            </div>
                            <span class="text-xl font-bold gradient-text"
                                >AetherTech</span
                            >
                        </div>
                        <p class="text-gray-600">
                            引领企业数字化转型，创造无限可能
                        </p>
                    </div>

                    <div>
                        <h4 class="font-semibold mb-4">产品</h4>
                        <ul class="space-y-2 text-gray-600">
                            <li>
                                <a
                                    href="#"
                                    class="hover:text-blue-600 transition-colors"
                                    >AetherCloud</a
                                >
                            </li>
                            <li>
                                <a
                                    href="#"
                                    class="hover:text-blue-600 transition-colors"
                                    >AI平台</a
                                >
                            </li>
                            <li>
                                <a
                                    href="#"
                                    class="hover:text-blue-600 transition-colors"
                                    >数据分析</a
                                >
                            </li>
                            <li>
                                <a
                                    href="#"
                                    class="hover:text-blue-600 transition-colors"
                                    >安全服务</a
                                >
                            </li>
                        </ul>
                    </div>

                    <div>
                        <h4 class="font-semibold mb-4">资源</h4>
                        <ul class="space-y-2 text-gray-600">
                            <li>
                                <a
                                    href="#"
                                    class="hover:text-blue-600 transition-colors"
                                    >文档中心</a
                                >
                            </li>
                            <li>
                                <a
                                    href="#"
                                    class="hover:text-blue-600 transition-colors"
                                    >开发者社区</a
                                >
                            </li>
                            <li>
                                <a
                                    href="#"
                                    class="hover:text-blue-600 transition-colors"
                                    >技术博客</a
                                >
                            </li>
                            <li>
                                <a
                                    href="#"
                                    class="hover:text-blue-600 transition-colors"
                                    >在线课程</a
                                >
                            </li>
                        </ul>
                    </div>

                    <div>
                        <h4 class="font-semibold mb-4">关注我们</h4>
                        <div class="flex space-x-4">
                            <a
                                href="#"
                                class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center hover:bg-blue-200 transition-colors"
                            >
                                <i
                                    data-lucide="twitter"
                                    class="w-5 h-5 text-blue-600"
                                ></i>
                            </a>
                            <a
                                href="#"
                                class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center hover:bg-blue-200 transition-colors"
                            >
                                <i
                                    data-lucide="linkedin"
                                    class="w-5 h-5 text-blue-600"
                                ></i>
                            </a>
                            <a
                                href="#"
                                class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center hover:bg-blue-200 transition-colors"
                            >
                                <i
                                    data-lucide="github"
                                    class="w-5 h-5 text-blue-600"
                                ></i>
                            </a>
                            <a
                                href="#"
                                class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center hover:bg-blue-200 transition-colors"
                            >
                                <i
                                    data-lucide="youtube"
                                    class="w-5 h-5 text-blue-600"
                                ></i>
                            </a>
                        </div>
                    </div>
                </div>

                <div
                    class="border-t border-blue-200 pt-8 text-center text-gray-600"
                >
                    <p>
                        © 2024 AetherTech. All rights reserved. | 隐私政策 |
                        服务条款
                    </p>
                </div>
            </div>
        </footer>

        <script>
            // 初始化Lucide图标
            lucide.createIcons();

            // 创建浮动气泡
            function createBubbles() {
                const container = document.getElementById("bubbles-container");
                const bubbleCount = 15;

                for (let i = 0; i < bubbleCount; i++) {
                    const bubble = document.createElement("div");
                    bubble.className = "bubble";
                    bubble.style.width = Math.random() * 100 + 50 + "px";
                    bubble.style.height = bubble.style.width;
                    bubble.style.left = Math.random() * 100 + "%";
                    bubble.style.animationDelay = Math.random() * 20 + "s";
                    bubble.style.animationDuration =
                        Math.random() * 10 + 20 + "s";
                    container.appendChild(bubble);
                }
            }

            createBubbles();

            // 数字计数器动画
            const counters = document.querySelectorAll(".counter");
            const speed = 200;

            const animateCounters = () => {
                counters.forEach((counter) => {
                    const target = parseFloat(
                        counter.getAttribute("data-target"),
                    );
                    const increment = target / speed;
                    let current = 0;

                    const updateCounter = () => {
                        current += increment;
                        if (current < target) {
                            counter.textContent = current.toFixed(
                                target % 1 === 0 ? 0 : 2,
                            );
                            requestAnimationFrame(updateCounter);
                        } else {
                            counter.textContent =
                                target % 1 === 0 ? target : target.toFixed(2);
                        }
                    };

                    updateCounter();
                });
            };

            // Intersection Observer for animations
            const observerOptions = {
                threshold: 0.1,
                rootMargin: "0px 0px -100px 0px",
            };

            const observer = new IntersectionObserver((entries) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting) {
                        if (entry.target.classList.contains("counter")) {
                            animateCounters();
                            observer.unobserve(entry.target);
                        }
                    }
                });
            }, observerOptions);

            counters.forEach((counter) => {
                observer.observe(counter);
            });

            // 平滑滚动
            document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
                anchor.addEventListener("click", function (e) {
                    e.preventDefault();
                    const target = document.querySelector(
                        this.getAttribute("href"),
                    );
                    if (target) {
                        target.scrollIntoView({
                            behavior: "smooth",
                            block: "start",
                        });
                    }
                });
            });

            // 移动端菜单切换
            function toggleMobileMenu() {
                // 这里可以添加移动端菜单的展开/收起逻辑
                console.log("Toggle mobile menu");
            }

            // 导航栏滚动效果
            let lastScroll = 0;
            window.addEventListener("scroll", () => {
                const nav = document.querySelector("nav");
                const currentScroll = window.pageYOffset;

                if (currentScroll > 100) {
                    nav.classList.add("shadow-lg");
                } else {
                    nav.classList.remove("shadow-lg");
                }

                lastScroll = currentScroll;
            });

            // 鼠标跟随光效
            document.addEventListener("mousemove", (e) => {
                const x = e.clientX / window.innerWidth;
                const y = e.clientY / window.innerHeight;

                document.body.style.background = `
                linear-gradient(${135 + x * 10}deg,
                    rgba(224, 242, 254, ${0.5 + y * 0.2}) 0%,
                    rgba(240, 249, 255, ${0.5 + x * 0.2}) 50%,
                    rgba(219, 234, 254, ${0.5 + y * 0.2}) 100%)
            `;
            });

            // 添加页面加载动画
            window.addEventListener("load", () => {
                document.body.style.opacity = "0";
                setTimeout(() => {
                    document.body.style.transition = "opacity 1s";
                    document.body.style.opacity = "1";
                }, 100);
            });
        </script>
    </body>
</html>
